<template>
    <div class="static_part">
        <router-link to="/search?redirct=/" class="ipt_box">
            <van-search placeholder="请输入商品关键词" shape="round" />
        </router-link>
        <div class="swiper_contain">
            <van-swipe
                class="my-swipe"
                :autoplay="3000"
                indicator-color="tan"
                width="339"
                height="86"
                lazy-render
            >
                <van-swipe-item v-for="image in swiperImages" :key="image">
                    <img :src="image" class="swiperImg" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="sort">
            <van-grid :column-num="4">
                <van-grid-item
                    v-for="item in sortList"
                    :key="item"
                    :icon="item.icon"
                    :text="item.title"
                />
            </van-grid>
        </div>
    </div>
</template>

<script setup>
import { useStore } from 'vuex';
const store = useStore();
const sortList = store.state.images.classify;
store.dispatch('images/getSwiper', '/carousel?project_id=24');
const swiperImages = store.state.images.swiperImages;
const emit = defineEmits(['onSearch']);
const iptClickHandler = () => {
    emit('onSearch');
};
</script>

<style lang="scss" scoped>
@import '../../../style/base.scss';
.static_part {
    box-sizing: border-box;
    width: 100%;
    height: 3.36rem;
    background-color: #ffffff;
    margin-bottom: 0.1rem;
    .swiper_contain {
        margin: 0.12rem auto 0;
        width: 3.39rem;
        height: 0.86rem;
        background-color: #ffffff;
        .swiperImg {
            width: 100%;
            height: auto;
        }
    }
    .sort {
        margin: 0.16rem auto 0;
        width: 3.39rem;
    }
}
</style>
